.mass-input {
    display: flex;
    min-height: 200px;
    border-radius: 2px;
    flex-direction: column;
    border: 1px solid #d9d9d9;

    .mass-head {
        height: 40px;
        display: flex;
        border-bottom: 1px solid #eeeeee;

        .mass-head-btn {
            opacity: 0.6;
            cursor: pointer;
            margin: 0px 10px;

            img {
                width: 16px;
                vertical-align: middle;
                transform: translateY(-1px);
            }

            span {
                margin-left: 5px;
                line-height: 40px;
            }
        }

        .mass-head-btn.active {
            opacity: 1;
        }
    }

    .mass-body {
        flex: 1;
        display: flex;
        flex-direction: column;
        
        .mass-text {
            flex: 1;
            display: flex;
            flex-direction: column;

            textarea {
                flex: 1;
                border: none;
                outline: none;
                padding: 10px;
                min-width: 100%;
                max-width: 100%;
            }
            
            textarea::-moz-placeholder {
                color: #999999;
            }

            textarea::-webkit-input-placeholder {
                color: #999999;
            }

            .mass-text-state {
                height: 40px;
                padding: 0px 10px;
                line-height: 40px;
                border-top: 1px solid #eeeeee;

                span {
                    float: right;
                }
            }
        }

        .mass-add {
            margin: 20px;
            width: 118px;
            height: 118px;
            cursor: pointer;
            color: #cccccc;
            text-align: center;
            display: inline-flex;
            flex-direction: column;
            justify-content: center;
            border: 1px dashed #d9d9d9;

            img {
                width: 30px;
                align-self: center;
            }

            div {
                padding: 6px;
            }

            input[type="file"][hidden] {
                display: none;
            }
        }
    }

    .material-item {
        padding: 5px;
        max-width: 200px;
        display: inline-block;
        transform: scale(0.9);
        border: 1px solid #d9d9d9;
        max-height: 388px;
        overflow: hidden
    }

    .mass-mpnews, .mass-news {
        div {
            vertical-align: top;
        }
    }

    .mass-page {
        a {
            padding: 10px;
        }
    } 
}

.mass-image {   
    margin: 20px;
    width: 120px;
    height: 120px;
    cursor: pointer;
    vertical-align: top;
    display: inline-block;
    background-size: contain;
    border: 1px solid #d9d9d9;
    background-repeat: no-repeat;
    background-position: 50% 50%;
}